<template>
	<view class="page-content">
		<view class="search">
			<uni-datetime-picker v-model="range" type="daterange" />
			<view class="search-bar">
				<view class="tip">
					默认显示15天数据
				</view>
				<view class="search-btn">
					<button type="primary" size="mini" @click="search">查询</button>
				</view>
			</view>
		</view>
		<view class="chart">
			总打单数：{{total}}
		</view>
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">日期</uni-th>
				<uni-th align="center">打单数</uni-th>
				<uni-th align="left">下级打单数</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="item in list">
				<uni-td>{{item.date}}</uni-td>
				<uni-td>{{item.count}}</uni-td>
				<uni-td>
					<button size="mini" @click="viewSubOrder(item)">查看</button>
				</uni-td>
			</uni-tr>


		</uni-table>
		<uni-popup ref="show_popup" background-color="#fff">
			<view class="popup-content">
				<uni-list>
					<uni-list-item :title="item.date" v-for="sub in subOrderList" :show-badge="true"
						badge-text="{{sub.count??0}}"></uni-list-item>
				</uni-list>
			</view>

		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getdailichengyuanAPI,
		getOrderStatAPI
	} from '../../apis/order_stat';
	const range = ref([])
	// 默认显示15天数据
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref(0)
	const list = ref([])
	const show_popup = ref()
	const subOrderList = ref([])
	const viewSubOrder = async (item) => {
		let {
			data
		} = await getdailichengyuanAPI({
			date: item.date
		})
		subOrderList.value = data.dlcylist
		if (data.zongshu == 0) {
			uni.showToast({
				title: '下级没有打单数',
				icon: 'error'
			})
			return
		}
		show_popup.value.open()
	}
	const getList = (async () => {
		let {
			data
		} = await getOrderStatAPI({
			beginTime: range.value[0] || '',
			endTime: range.value[1] || '',
			page: page.value,
			size: pageSize.value
		})
		list.value = data.orders
		total.value = data.sum
	})
	const search = () => {

		getList()
	}
	onMounted(() => {
		getList()
	})
</script>

<style lang="scss">
	.page-content {
		padding: 20upx;

		.search {
			.search-bar {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20upx;
			}
		}

		.chart {
			padding: 20upx;
			color: #36d;
			font-size: 30upx;
			text-align: center;
			border-radius: 10upx;
			border: 1px solid #eee;
			margin-bottom: 20upx;

		}
	}
</style>